<template>
  <div class="user_info">
    <div class="userinfo_top">
      <h3>X!d!a!</h3>
      <h4>于影而驰的个人小站</h4>
      <h5 @click="signin_active = !signin_active">签到</h5>
    </div>
    <div class="user_body">
      <div class="userinfo_left">
        <h3>
          这是一则来自影的来信:相信努力,相信自己,然后期待,希望,未来,和成功.<br />&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp───────影,随着你,而无处不在~
        </h3>
        <div class="userinfo_left_top">
          <p>&lt;--于影而驰--&gt;</p>
          <img src="@/assets/user.jpg" alt="" />
          <span>Everything will be fine with us!</span>
        </div>
        <div class="userinfo_left_center">
          <a
            class="bilibili"
            href="https://space.bilibili.com/30241181?spm_id_from=333.337.0.0"
          >
            <p>bilibili</p>
            <img src="@/assets/bgimgs/shd.png" alt="" />
          </a>
          <div class="mainmenu">
            <span @click="$router.push('/home/projects')">项目中心</span>
            <span>维护广场</span>
            <span @click="$router.push('/home/articles')">个人生活</span>
            <span @click="$router.push('/home/aboutblok')">关于博客</span>
          </div>
        </div>
        <div class="userinfo_left_bottom">
          <p>开发区</p>
          <span>游戏社区</span>
          <span>熟人广场</span>
        </div>
      </div>
      <transition name="menu_change">
        <router-view />
      </transition>
    </div>
  </div>
  <transition name="sig" appear mode="out-in">
    <calendar v-if="signin_active"></calendar>
  </transition>
</template>

<script>
import calendar from "@/components/Calendar/Calendar.vue";

export default {
  data() {
    return {
      signin_active: false,
    };
  },
  components: {
    calendar,
  },
};
</script>

<style lang="less">
@font-face {
  font-family: "english";
  src: url("/src/fonts/Babyque.ttf");
}
@font-face {
  font-family: "xda01";
  src: url("/src/fonts/上首刺云体.ttf");
}
@font-face {
  font-family: "xda02";
  src: url("/src/fonts/极字经典综艺简繁.ttf");
}
.sig-enter-active,
.sig-leave-active {
  transition: all ease-in .2s;
}
.sig-leave-to{
  transform: scale(0);
  opacity: 0;
}

.user_info {
  margin: 0 auto;
  width: 1350px;

  .userinfo_top {
    width: 1350px;
    height: 70px;
    background-color: rgba(4, 4, 4, 0.712);
    box-shadow: 0 0 4px 6px rgba(55, 55, 55, 0.665);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    padding: 0 50px;
    justify-content: space-between;
    user-select: none;
    h5 {
      color: white;
      font-size: 25px;
    }
    h5:hover {
      text-shadow: 0 0 4px rgb(6, 155, 214), 0 0 14px rgb(6, 129, 177),
        0 0 24px rgb(3, 81, 112);
      cursor: pointer;
    }
    h3 {
      letter-spacing: 4px;
      color: #fff;
      font-family: english;
      font-size: 60px;
      text-shadow: 0 0 4px rgb(6, 129, 177), 0 0 14px rgb(6, 129, 177),
        0 0 24px rgb(6, 129, 177);
    }
    h4 {
      letter-spacing: 2px;
      color: #fff;
      font-size: 20px;
      font-family: xda01;
      margin-right: 20px;
    }
  }

  .user_body {
    margin: 0 auto;
    width: 1200px;
    height: 620px;
    display: flex;
    align-items: flex-start;
    .menu_change-enter-active,
    .menu_change-leave-active {
      transition: all ease-in 0.3s;
    }
    .menu_change-enter  /* .fade-leave-active below version 2.1.8 */ {
      transform: scaleX(0);
    }
    // .menu_change-enter-to{
    //   opacity: 1;
    // }
    .menu_change-leave-to {
      transform: scaleX(0);
    }
    // .menu_change-leave{
    //   opacity: 1;

    // }
    .userinfo_left {
      width: 400px;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      margin-right: 30px;
      h3 {
        letter-spacing: 1.5px;
        font-family: xda01;
        margin-bottom: 25px;
        background-color: rgba(237, 237, 237, 0.595);
        box-shadow: 0 0 5px 2px rgb(47, 47, 47);
        border-radius: 5px;
      }
      .userinfo_left_top {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        margin-bottom: 25px;
        background-color: rgba(237, 237, 237, 0.595);
        box-shadow: 0 0 5px 2px rgb(47, 47, 47);
        border-radius: 5px;
        p {
          font-size: 25px;
          padding: 4px 0;
          color: #fff;
          font-family: xda02;
          width: 100%;
          background-color: rgba(0, 0, 0, 0.6);
          margin-bottom: 15px;
        }
        img {
          width: 110px;
          height: 110px;
          border-radius: 50%;
          box-shadow: 0 0 5px 2px rgb(2, 57, 63);
          margin-bottom: 8px;
        }
        span {
          font-size: 15px;
          color: rgb(104, 104, 104);
          margin-bottom: 20px;
        }
      }
      .userinfo_left_center {
        position: relative;
        width: 100%;
        height: 200px;
        margin-bottom: 25px;
        display: flex;
        justify-content: center;
        background-color: rgba(237, 237, 237, 0.595);
        box-shadow: 0 0 5px 2px rgb(62, 62, 62);
        border-radius: 5px;
        .bilibili {
          background-color: rgba(255, 192, 203, 0.583);
          border-radius: 80px;
          width: 80px;
          height: 80px;
          box-shadow: 0 0 4px 6px rgba(126, 85, 126, 0.408);
          left: 20px;
          top: 50%;
          transform: translateY(-50%);
          position: absolute;
          p {
            margin-top: 8px;
            color: pink;
            text-shadow: 0 0 5px palevioletred;
          }
          img {
            width: 40px;
            height: 40px;
          }
        }

        .mainmenu {
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 50%;
          border-right: 3px solid rgba(0, 0, 0, 0.575);
          border-left: 3px solid rgba(0, 0, 0, 0.534);
          justify-content: space-around;
          margin-left: 30px;
        }
        span {
          width: 60%;
          background-color: rgb(70, 70, 70);
          padding: 4px;
          font-size: 20px;
          color: #fff;
          border-radius: 5px;
          box-shadow: 0 0 5px 5px white;
        }
        span:hover {
          box-shadow: 0 0 5px 5px rgb(31, 31, 31);
          background-color: rgb(219, 219, 219);
          color: #000;
          cursor: pointer;
        }
      }
      .userinfo_left_bottom {
        width: 100%;
        flex: 1;
        display: flex;
        align-items: center;
        border-top: 2px solid rgb(78, 78, 78);
        background-color: rgba(237, 237, 237, 0.595);
        box-shadow: 0 0 5px 2px rgb(47, 47, 47);
        border-radius: 5px;
        padding: 0 5px;
        p {
          height: 70px;
          display: flex;
          align-items: center;
          justify-content: center;
          color: rgb(80, 80, 80);
          writing-mode: vertical-rl;
          width: 50px;
          font-weight: 600;
          box-shadow: 0 0 2px 2px rgb(104, 104, 104);
          padding-right: 5px;
          border-radius: 8px;
          border-right: 1px solid black;
        }
        span {
          font-family: xda01;
          height: 55px;
          flex: 1;
          background-color: rgb(70, 70, 70);
          margin: 0 11px;
          box-shadow: 0 0 5px 5px rgb(210, 210, 210);
          color: #fff;
          font-size: 30px;
          line-height: 60px;
          border-radius: 8px;
        }
      }
    }
  }
}
</style>